//引入 path 包
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  //设置需要打包的文件
  entry: path.join(__dirname, './src/index.js'),
  devtool: 'inline-source-map',  // 加上对应的配置
  //设置出口文件
  output: {
    filename: 'bundle.js', //打包好文件的文件名
    path: path.resolve(__dirname, 'dist'), //打包好的文件存放地址
    // publicPath:'/dist/',
  },
  mode: 'development', //设置 mode
  plugins: [
    new HtmlWebpackPlugin({
      //指定模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html',
      //设置 favicon 图标
      favicon: path.resolve('favicon.ico') 
    }),
    // vue-loader 支持插件
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      //配置处理 .css 文件的 第三方 loader 规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.(png|jpg|gif|jpeg)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]' },
      { test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
      { test:/\.js$/, use: "babel-loader", exclude: /node_modules/},
      { test:/\.vue$/, use:'vue-loader' }
    ],
  },
  resolve:{
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  },

  //跨域代理设置
  devServer:{
    // host:'192.168.31.95',
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: { '^/api' : '' },
        secure:false
      },
    }
  }
};

/**
 * 当我们在控制台，直接输入 webpack 命令执行的时候， webpack 做了以下几步：
 * 1.首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
 * 2.webpack 就会去项目的根目录，查找一个叫 `webpack.config.js` 的配置文件
 * 3.当找到配置文件，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了配置文件中，到处的配置对象 module.export
 * 4.当 webpack 拿到配置对象后，就拿到了配置对象中，指定的 入口和出口，然后进行打包构建；
 */
